<template>
  <!--参数取值必须在标签内。不能单独在template内-->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>科创立项查找</span>
        <el-button style="float: none; padding: 3px 0" type="text" v-on:click="scienceQuery()">查询</el-button>
      </div>
      <div class="text item">
        {{'项目主题：'}}<el-input style="width:200px" v-model="userform.subject" ></el-input>
        {{'   项目负责人：'}}<el-input style="width:140px" v-model="userform.principal" ></el-input>
         {{'   团队成员：'}}<el-input style="width:140px" v-model="userform.team" ></el-input>
         {{'   指导教师：'}}<el-input style="width:140px" v-model="userform.teacher" ></el-input>
         {{'最终成绩：'}}  <el-input style="width:140px" v-model="userform.final_acheive" ></el-input>
      </div>
      <div class="text item">
        {{'负责联系方式：'}}<el-input style="width:140px" v-model="userform.phone" ></el-input>
        {{'结题要求：'}}  <el-input style="width:140px" v-model="userform.request" ></el-input>
        {{'立项时间：'}}  <el-input style="width:140px" v-model="userform.time" ></el-input>
        {{'项目所处阶段：'}}  <el-input style="width:140px" v-model="userform.stage" ></el-input>
        {{'项目成果：'}}  <el-input style="width:140px" v-model="userform.acheive" ></el-input>
      </div>
    </el-card>
     <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>查询结果</span>
            <el-button style="float: none;" type="text" v-on:click="exportExcel()">导出excel</el-button>
          </div>
          <el-table id="Science" :data="science" stripe border >
            <el-table-column label="序号" align="center" width="78">
              <template slot-scope="scope">
                <span>{{ scope.$index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目主题" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.subject }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目负责人" align="center">
              <template slot-scope="scope">
               <span>{{ scope.row.principal }}</span>
              </template>
            </el-table-column>
            <el-table-column label="团队成员" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.team }}</span>
              </template>
            </el-table-column>
            <el-table-column label="指导教师" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.teacher }}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责联系方式" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结题要求" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.request }}</span>
              </template>
            </el-table-column>
            <el-table-column label="立项时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目所处阶段" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.stage }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目成果" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.acheive }}</span>
              </template>
            </el-table-column>
            <el-table-column label="最终成绩" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.final_acheive }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: "ScienceQuery",
  props:['id'],
  data() {
    return {
        userform:{        subject:'',
                          principal:"",
                          team: '',
                          teacher:"",
                          phone:"",
                          request:"",
                          time:"",
                          stage:"",
                          acheive:"",
                          final_acheive:"",
    },
    science:[]
    }
  },
    methods: {
      show() {
        console.log(this.$route.params.id)
      },
      scienceQuery(){
      var url='/science/query';
      this.$http.get(url,{params:this.userform}).then((res) =>{
              console.log(res);
              var jsonObject = res.data;
              this.science=jsonObject.sciences;
          })
          .catch((err) => {
                        this.$notify.error({
                          title: "错误",
                          message: "服务器内部错误",
                        });
                      });
      },
    exportExcel () {
        /* generate workbook object from table */
         let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
         let wb = XLSX.utils.table_to_book(document.querySelector('#Science'), xlsxParam);
         /* get binary string as output */
         let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'science.xlsx');
         } catch (e)
         {
             if (typeof console !== 'undefined')
                 console.log(e, wbout)
         }
         return wbout
     }
    }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 1200px;
}
</style>
